<template>
  <el-row :gutter="20">
    <el-col v-for="(item,index) in data.options" :span ="span" :key="index" :xs="24" class="col-container">{{ $t(item.label) }}:
      <span v-if="item.filter">
        {{ Vue.filter(item['filter'])(data.data[item.prop]) }}
      </span>
      <span v-else>
        {{ data.data[item.prop] }}
      </span>
    </el-col>
  </el-row>
</template>

<script>
import Vue from 'vue'
export default {
  name: 'Row',
  props: {
    'data': {
      type: Object,
      default: {}
    },
    span: {
      type: Number,
      default: 12
    }
  },
  data() {
    return {
      Vue
    }
  }
}
</script>
<style lang="scss" scoped>
.col-container{
  font-size: 14px;
  padding-bottom: 16px;
}
</style>
